<template>
	<view class="picker-box">
		 <view class="item">
			<customizePickerVue :pickerValue.sync="startPicker" :mask-style="setStyle" :picker-column="pickerColumn" centerSymbol=":" :centerSymbolEd="!0" @bindChange="changePicker"/>
		 </view>
		 <view class="text">
			 至
		 </view>
		 <view class="item">
			<customizePickerVue :pickerValue.sync="endPicker" :mask-style="setStyle" :picker-column="pickerColumn" centerSymbol=":" :centerSymbolEd="!0" @bindChange="changePicker"/>
		 </view>
	</view>
</template>

<script>
	import customizePickerVue from '../../../components/customize-picker/customize-picker.vue';
	
	export default {
		props: {
			start: String,
			end: String,
			type: Number, // 2 全职金额筛选  3兼职金额筛选
			fullTimeList: {
				type: Array,
				default: () => ([])
			},
			partTimeList: {
				type: Array,
				default: () => ([])
			},
		},
		components: {
			customizePickerVue,
		},
		data() {
			return {
				newShow: false,
        		startPicker: [0,0],
        		endPicker: [0,0],
				pickerColumn: [
					{
						suffix: '',
						key: 'start',
						list: [],
					},
					{
						suffix: '',
						key: 'end',
						list: [],
					},
				]
			};
		},
		computed: {
			/* 小程序不支持两个类名 */
			setStyle(){
				return `background-image: linear-gradient(rgba(255,255,255, 0.95), rgba(255,255,255, 0.6)), linear-gradient(0deg, rgba(255,255,255, 0.95), rgba(255,255,255, 0.6));`;
			},
		},
		watch: {
			start(val){
				console.log(this.start,this.end);
			}			
		},
		mounted(){
			this.setPickerColumnList();
			// this.resetTime();
		},
		methods: {
			changeShow(){
				this.$emit('update:show',this.newShow);
				this.$emit('changeShow', 'workingHours');
			},
			generateSequence(count,initial = 0) {
				const init = Number(initial);
				return [...Array(count).keys()].map(i => {
					const num = i + init;
					const str = num < 10 ? `0${num}` : `${num}`;
					return str;
				});
			},
			setPickerColumnList(){
				this.$set(this.pickerColumn[0],'list',this.generateSequence(24));
				this.$set(this.pickerColumn[1],'list',this.generateSequence(60));
			},
			reset(){
				this.startPicker = [0,0];
				this.endPicker = [0,0];
			},
			changePicker(){
				const startArr = [];
				const endArr = [];
				this.startPicker.forEach((v, i) => {
					const str = this.pickerColumn[i].list[v];
					startArr.push(str);					
				});
				this.endPicker.forEach((v, i) => {
					const str = this.pickerColumn[i].list[v];
					endArr.push(str);				
				});
				const start = startArr.join(':');
				const end = endArr.join(':');
				console.log({start,end});
				this.$emit("update:start",start);
				this.$emit("update:end",end);
				this.$emit('endChange',{start,end});
				// this.resetTime();
			},
		}
	}
</script>

<style lang="less" scoped>
.picker-box {
	width: 100%;
	display: flex;
	align-items: center;
	.item {
		width: 320rpx;
	}
}
</style>
